<template>
  <div class="demo-title">date-picker/demo2</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="date.show()">范围设置</div>
  </div>
  <DatePicker v-model:visible="date.visible" v-model="date.value" :min-date="date.minDate" :max-date="date.maxDate" @confirm="date.onConfirm" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import DatePicker from '@sscd-mobile/date-picker'
  const date = reactive({
    visible: false,
    show: () => date.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    minDate: new Date(2024, 0, 1),
    maxDate: new Date(2024, 11, 31),
    onConfirm: (res) => console.log('onConfirm: ', res, date.value)
  })
</script>

<style scoped></style>